<html>
<head>
<title>GWT Masterview library documentation: Basic usage</title>
<link href="resources/main.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="resources/SyntaxHighlighter.css" type="text/css" />
<script src="resources/shCore.js"></script>
<script src="resources/shBrushJava.js"></script>
<script>
    window.onload = function() {
      dp.SyntaxHighlighter.HighlightAll("code");
    }
</script>

</head>
<body>
<div id="header">
<h1>Masterview library 0.1</h1>
</div>

<div id="navigation">
<h2>Choose topic:</h2>
<ul>
	<li><a href="index.html">Overview</a></li>
	<li><a href="basic-usage.html">Getting started guide</a></li>
	<li><a href="themes.html">Styling the tables</a></li>	
	<li><a href="filtering-expressions.html">Filtering</a></li>
</ul>
</div>

<div id="content">
<h1>Basic usage</h1>
<p>This tutorial will show to you the basic usage of Masterview library.</p>

<p>To use the library, you need <b>masterview.jar</b> on your classpath, as well as <b>gwt-user.jar</b> 
and platform-specific <b>gwt-dev-os.jar</b> (for example, <i>gwt-dev-windows.jar</i> or <i>gwt-dev-linux</i>).</p>

<p>Add <i>inherits name='org.masterview.user.Masterview'</i> line to all modules that will use the library. Also
add a reference to the one of available masterview's stylesheets, for example <i>stylesheet src="mastergrid-default.css"</i> 
(read about it <a href="themes.html">here</a>).</p>

<p>Resulting GWT module's xml will look like this:</p>
<textarea name="code" class="java:nogutter:nocontrols" rows="15" cols="100">
	<module>
		<inherits name='com.google.gwt.user.User'/>
		<inherits name='org.masterview.user.Masterview'/>

		<stylesheet src="mastergrid-default.css"/>   
		<entry-point class='com.mycompany.example.user.client.MyEntryPoint'/>
		
		<!-- other declarations -->
	</module>
</textarea>

<p>Now you are ready to write the code.</p>

<p>Create a bean like this:</p>

<textarea name="code" class="java:nogutter:nocontrols" rows="15" cols="100">
package com.mycompany.example.user.client;

public class Album
{
    private String name;
	private String artist;
    private int year;
    private String genre;

    public String getName() {
		return name;
	}
	
	public void setName(String name) {
		this.name = name;
	}
	
	public String getArtist() {
		return artist;
	}
	
	public void setArtist(String artist) {
		this.artist = artist;
	}

	public int getYear() {
		return year;
	}
	
	public void setYear(int year) {
		this.year = year;
	}
	
	public String getGenre() {
		return genre;
	}
	
	public void setGenre(String genre) {
		this.genre = genre
	}
	
    public Album() {}

    public Album(String name, String artist, int year, String genre) {
        this.name = name;
		this.artist = artist;
		this.year = year;
		this.genre = genre;
    }
}
</textarea>

<p>Create a collection of albums:</p>

<textarea name="code" class="java:nogutter:nocontrols" rows="15" cols="100">
	List albums = new ArrayList();
	for (int i = 0; i < 50; i++) {
		albums.add(new Album("Album #" + i, "Artist #" + i, i, "Some genre");
	}
</textarea>

<p>Create a MasterView with the collection of albums as it's data source:</p>

<textarea name="code" class="java:nogutter:nocontrols" rows="15" cols="100">
	MasterView masterView = (MasterView) GWT.create(Album.class);
	masterView.setItems(albums);		
</textarea>

<p>Add columns. To create a column you must at least specify a property of a bean that will be rendered
in this column. Our Album bean has 4 properties: "name", "artist", "year" and "genre". We set the columns so that all 4 properties
will be rendered:</p>

<textarea name="code" class="java:nogutter:nocontrols" rows="15" cols="100">
	masterView.appendColumn(new Column("name", "Name", true, "40%"));
	masterView.appendColumn(new Column("artist", "Artist", true, "30%"));
	masterView.appendColumn(new Column("year", "Year of recording", true, "20%"));
	masterView.appendColumn(new Column("genre", "Genre", true, "20%"));	
</textarea>

<p>In the code snippet above the first parameter of Column's constructor is the name of the album's property to render, the second parameter is
the title of the column, the third parameter defines if the column is sortable and the fourth one is the width of the column.</p>

<p>Enable the filtering (disabled by default) and set how much items you want to be displayed per page.</p>

<textarea name="code" class="java:nogutter:nocontrols" rows="15" cols="100">
	masterView.setFilteringEnabled(true);
	masterView.setPageSize(10);
</textarea>

<p>Add MasterView to a container:</p>

<textarea name="code" class="java:nogutter:nocontrols" rows="15" cols="100">
	RootPanel.get().add(masterView);   
</textarea>

<p>In result you should get something like this:</p>
<div style="text-align:center;">
	<img src="resources/albums_screenshot.png"/>
</div>

<p>That's all for now.</p>
		
</div>
</body>
</html>